<template>
	<div class="_calendar _container">
		<el-container>
			<el-main>
				<!-- <el-card> -->
				<el-calendar v-model="value" :first-day-of-week="7">
					<!-- 这里使用的是 2.5 slot 语法，对于新项目请使用 2.6 slot 语法-->
					<template slot="dateCell" slot-scope="{ date, data }">
						<div slot="reference" class="div-Calendar" @click="calendarOnClick(data)">
							<p :class="data.isSelected ? 'is-selected' : ''">
								{{
									data.day
										.split('-')
										.slice(1)
										.join('-')
								}}
								<i :class="[data.isSelected ? 'el-icon-check' : '']"></i>
								<i v-if="_.indexOf(isArrange, data.day) > 0" class="el-icon-s-claim"></i>
								<!-- <i class="el-icon-coffee-cup"></i> -->
							</p>
						</div>
					</template>
				</el-calendar>
				<!-- </el-card> -->
			</el-main>

			<el-aside width="40%" style="height: 800px; overflow: hidden;">
				<!-- <el-card> -->
				<div class="el-calendar__header">
					<div class="el-calendar__title">日程详情</div>
					<div class="el-calendar__button-group">
						<div class="el-button-group">
							<button type="button" class="el-button el-button--plain el-button--mini" @click="saveOnClick"><span>新增</span></button>
						</div>
					</div>
				</div>
				<div class="calendar-info">
					<div style="padding: 15px;" v-for="(item, index) in todos">
						<!-- <div role="alert"  class="el-alert el-alert--success is-light" v-bind:class="[isSuccess?'el-alert--success is-light':'el-alert--info is-light']" @click="infoOnClick"> -->
						<div role="alert" class="el-alert " v-bind:class="[isSuc(item) ? 'el-alert--success is-light' : 'el-alert--info is-light']" @click="infoOnClick(item)">
							<i v-bind:class="[isSuc(item) ? 'el-alert__icon el-icon-info is-big' : 'el-alert__icon el-icon-success is-big']"></i>
							<div class="el-alert__content">
								<span class="el-alert__title is-bold">{{ item.stime }} -- {{ item.etime }}</span>
								<p class="el-alert__description">todo：{{ item.name }}</p>
								<p class="el-alert__description">所属项目：{{ item.belong }}</p>
								<i class="el-alert__closebtn el-icon-close" @click.stop="infoDel"></i>
							</div>
						</div>
					</div>
					
					
					<div style="padding: 15px;" v-for="(item, index) in tasks">
						<div role="alert" class="el-alert " v-bind:class="[isTsuc(item) ? 'el-alert--info is-light' : 'el-alert--success is-light']" @click="taskOnClick(item)">
							<i v-bind:class="[isTsuc(item) ? 'el-alert__icon el-icon-success is-big' : 'el-alert__icon el-icon-info is-big']"></i>
							<div class="el-alert__content">
								<span class="el-alert__title is-bold">{{ item.stime }} -- {{ item.etime }}</span>
								<p class="el-alert__description">任务名称：{{ item.name }}</p>
								<p class="el-alert__description">所属项目：{{ item.project }}</p>
								<i class="el-alert__closebtn el-icon-close" @click.stop="infoDel"></i>
							</div>
						</div>
					</div>
					
					
					
				</div>
				<!-- </el-card> -->
			</el-aside>
		</el-container>
		<calendarDrawer ref="calendarDrawer" :infoId="infoId" :taskId="taskId"></calendarDrawer>
		<!-- 数据没绑定上 -->
		
		
		
		<calendarForm ref="calendarForm"></calendarForm>
	</div>
</template>
<script>
import axios from '../../utils/axiosutils.js';
import calendarDrawer from './calendar-drawer.vue';
import calendarForm from './calendar-form.vue';
export default {
	components: { calendarDrawer, calendarForm },
	data: function() {
		return {
			value: new Date(),
			isArrange: [],
			todos: [],
			tasks: [],
			infoId:'',
			taskId:''
		};
	},
	created: function() {
		this.dayofthings();
		this.arrange();
		this.$nextTick(() => {
			// 点击前一个月
			let prevBtn = document.querySelector('.el-calendar__button-group .el-button-group>button:nth-child(1)');
			prevBtn.addEventListener('click', e => {
				this.$notify({
					title: '上一月',
					message: '上个月头天：' + this.value,
					type: 'success',
					position: 'top-left'
				});
			});

			//点击下一个月
			let nextBtn = document.querySelector('.el-calendar__button-group .el-button-group>button:nth-child(3)');
			nextBtn.addEventListener('click', () => {
				this.$notify({
					title: '下一月',
					message: '下个月头天：' + this.value,
					type: 'warning',
					position: 'top-left'
				});
			});

			//点击今天
			let todayBtn = document.querySelector('.el-calendar__button-group .el-button-group>button:nth-child(2)');
			todayBtn.addEventListener('click', () => {
				this.dayofthings();
			});
		});
	},
	mounted: function() {},
	methods: {
		dayofthings(date) {
			if (date == undefined) {
				date = this.value;
			}
			let time = date.getTime();
			axios.get(
				'/todo/todoThings',
				resp => {
					this.todos = resp.obj.todos;
					this.tasks = resp.obj.tasks;
				},
				{
					date: time
				}
			);
			
		},
		//加载isarrange
		arrange(){
			axios.get(
				'/todo/isArrange',
				resp => {
					this.isArrange = resp.obj.isArrange;
				}
			);
		},
		
		
		//绑定class事件
		isSuc(item) {
			if (item.status == 0) {
				return true;
			} else if (item.status == 3) {
				return false;
			}
		},//task的class绑定事件
		isTsuc(item) {
			if (item.status == 3) {
				return true;
			} else if (item.status == 0) {
				return false;
			}
		},

		//点击日期块
		calendarOnClick(e) {
			let time =this.stringToDate(e.day);
			this.dayofthings(time)
		},
		stringToDate : function(dateStr,separator){
		     if(!separator){
		            separator="-";
		     }
		     var dateArr = dateStr.split(separator);
		     var year = parseInt(dateArr[0]);
		     var month;
		     //处理月份为04这样的情况                         
		     if(dateArr[1].indexOf("0") == 0){
		         month = parseInt(dateArr[1].substring(1));
		     }else{
		          month = parseInt(dateArr[1]);
		     }
		     var day = parseInt(dateArr[2]);
		     var date = new Date(year,month -1,day);
		     return date;
		 },
		//点击todo信息块
		infoOnClick(item) {
			
			this.infoId=item.id;
			this.$refs.calendarDrawer.drawer = true;
		},
		//点击任务信息块
		taskOnClick(item) {
			
			this.taskId=item.id;
			this.$refs.calendarDrawer.drawer = true;
		},
		//新增
		saveOnClick() {
			this.$refs.calendarForm.dialogFormVisible = true;
		},
		//删除
		infoDel() {
			this.$confirm('当前页面只能查看任务，不能删除', '提示', {
				confirmButtonText: '确定',
				cancelButtonText: '取消',
				type: 'warning'
			})
		}
	}
};
</script>
<style scoped>
.is-selected {
	color: #1989fa;
}
.p-popover {
	text-align: center;
}

.el-main {
	padding: 0px;
	overflow: hidden;
}
.calendar-info {
	height: 95%;
	overflow: auto;
}
.el-alert {
	margin: 10px 0px;
}
.el-alert:hover {
	transform: scale(1.02);
}
.el-alert:active {
	transform: scale(1.01);
}
.el-alert__content i {
	font-size: 16px;
}

.theme-dark .calendar-info {
	background-color: #1d1e1f;
	border-left: 1px solid #404042;
}
.theme-light .calendar-info,
.theme-light .el-calendar__header {
	background-color: #fff;
	border-left: 1px solid #ebeef5;
}
</style>
<style>
._calendar .div-Calendar {
	height: 122px;
	box-sizing: border-box;
	padding: 8px;
}
._calendar .el-calendar-table .el-calendar-day {
	padding: 0px;
	height: 122px;
}
._calendar .el-container,
._calendar .el-calendar {
	height: 100%;
}
</style>
